import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import {
  CalendarOutline,
  PayCircleOutline,
  RightOutline,
  AddOutline
} from 'antd-mobile-icons'
import Layout from '../../components/Layout'
import { Swiper } from 'antd-mobile'
import styles from './index.module.css'

function Index() {
  const navigate = useNavigate()
  const [activeTab, setActiveTab] = useState('outpatient')

  const handleServiceClick = (service: string) => {
    console.log('点击服务:', service)
    // 这里可以添加具体的服务跳转逻辑
  }

  const handleChatClick = () => {
    navigate('/chat')
  }

  const slides = [
    { id: 's1', titleLine1: '健康生活', titleLine2: '轻松简单', icons: ['👨‍⚕️','💉','📅','💊'], theme: 'slide1' },
    { id: 's2', titleLine1: '便民服务', titleLine2: '一站办理', icons: ['🏥','🧾','🧪','🧭'], theme: 'slide2' },
    { id: 's3', titleLine1: '智慧医院', titleLine2: '理赔无忧', icons: ['🤖','📱','🔔','🔒'], theme: 'slide3' },
  ]

  // 不同分类的服务入口数据
  const serviceMap: Record<string, { key: string; label: string; icon: string }[]> = {
    outpatient: [
      { key: 'report', label: '门诊报告', icon: '📋' },
      { key: 'waiting', label: '候诊查询', icon: '⏰' },
      { key: 'order', label: '自助开单', icon: '📝' },
      { key: 'appointment', label: '医技预约', icon: '🔬' },
      { key: 'followup', label: '我的复诊', icon: '🔄' },
      { key: 'number', label: '自助取号', icon: '🎫' },
      { key: 'guide', label: '门诊导诊单', icon: '🗺️' },
      { key: 'bill', label: '电子票据', icon: '🧾' },
    ],
    inpatient: [
      { key: 'admit', label: '入院登记', icon: '📝' },
      { key: 'prepay', label: '住院预交', icon: '💰' },
      { key: 'inReport', label: '住院报告', icon: '📑' },
      { key: 'daily', label: '住院日清单', icon: '🗒️' },
      { key: 'carePass', label: '住院陪护证', icon: '🎫' },
    ],
    comprehensive: [
      { key: 'proxy', label: '代寄服务', icon: '📦' },
      { key: 'decoct', label: '中药代煎', icon: '🧪' },
      { key: 'price', label: '价目查询', icon: '💲' },
      { key: 'guidebook', label: '就医指南', icon: '📘' },
      { key: 'survey', label: '满意度调查', icon: '✅' },
      { key: 'floor', label: '楼层分布', icon: '🏢' },
    ],
  }

  const currentServices = serviceMap[activeTab] || []

  return (
    <Layout title="智慧医院平台">
      <div className={styles.container}>
        {/* 促销横幅 - 轮播图 */}
        <div className={styles.banner}>
          <Swiper autoplay loop>
            {slides.map(s => (
              <Swiper.Item key={s.id}>
                <div className={`${styles.bannerSlide} ${styles[s.theme]}`}>
                  <div className={styles.bannerContent}>
                    <div className={styles.bannerText}>
                      <h2>{s.titleLine1}<br />{s.titleLine2}</h2>
                    </div>
                    <div className={styles.bannerIcons}>
                      <div className={styles.iconGroup}>
                        {s.icons.map((ic, idx) => (
                          <div key={idx} className={styles.icon}>{ic}</div>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>
              </Swiper.Item>
            ))}
          </Swiper>
        </div>

        {/* 快速访问按钮 */}
        <div className={styles.quickActions}>
          <button
            className={`${styles.quickBtn} ${styles.registration}`}
            onClick={() => handleServiceClick('registration')}
          >
            <div className={styles.btnIcon}>
              <CalendarOutline />
            </div>
            <div className={styles.btnText}>
              <div className={styles.btnTitle}>门诊挂号</div>
              <div className={styles.btnSubtitle}>便捷预约挂号</div>
            </div>
          </button>

          <button
            className={`${styles.quickBtn} ${styles.payment}`}
            onClick={() => handleServiceClick('payment')}
          >
            <div className={styles.btnIcon}>
              <PayCircleOutline />
            </div>
            <div className={styles.btnText}>
              <div className={styles.btnTitle}>门诊缴费</div>
              <div className={styles.btnSubtitle}>便捷预约挂号</div>
            </div>
          </button>
        </div>

        {/* 公告栏 */}
        <div className={styles.announcement}>
          <span className={styles.announcementLabel}>公告</span>
          <span className={styles.announcementText}>智慧医院即将上线通知</span>
          <RightOutline className={styles.announcementArrow} />
        </div>

        {/* 服务分类标签 */}
        <div className={styles.serviceTabs}>
          <div className={styles.tabs}>
            <button
              className={`${styles.tab} ${activeTab === 'outpatient' ? styles.active : ''}`}
              onClick={() => setActiveTab('outpatient')}
            >
              门诊
            </button>
            <button
              className={`${styles.tab} ${activeTab === 'inpatient' ? styles.active : ''}`}
              onClick={() => setActiveTab('inpatient')}
            >
              住院
            </button>
            <button
              className={`${styles.tab} ${activeTab === 'comprehensive' ? styles.active : ''}`}
              onClick={() => setActiveTab('comprehensive')}
            >
              综合
            </button>
          </div>
          <span className={styles.more}>更多</span>
        </div>

        {/* 服务入口网格（跟随上方分类切换） */}
        <div className={styles.serviceGrid}>
          {/* 按 4 列换行渲染 */}
          {Array.from({ length: Math.ceil(currentServices.length / 4) }).map((_, rowIdx) => (
            <div key={rowIdx} className={styles.gridRow}>
              {currentServices.slice(rowIdx * 4, rowIdx * 4 + 4).map(s => (
                <button key={s.key} className={styles.gridItem} onClick={() => handleServiceClick(s.key)}>
                  <div className={styles.itemIcon}>{s.icon}</div>
                  <span className={styles.itemLabel}>{s.label}</span>
                </button>
              ))}
            </div>
          ))}
        </div>

        {/* 健康资讯 */}
        <div className={styles.healthInfo}>
          <div className={styles.sectionHeader}>
            <h3 className={styles.sectionTitle}>健康资讯</h3>
            <span className={styles.sectionMore}>更多</span>
          </div>

          <div className={styles.articleList}>
            <div className={styles.articleCard}>
              <div className={styles.articleContent}>
                <h4 className={styles.articleTitle}>
                  世界糖尿病日,应该注意什么 来调节?
                </h4>
                <div className={styles.articleTag}>#健康养生</div>
                <div className={styles.articleStats}>
                  <span className={styles.statItem}>👍 520</span>
                  <span className={styles.statItem}>👁️ 2000</span>
                </div>
              </div>
              <div className={styles.articleThumbnail}>📰</div>
            </div>

            <div className={styles.articleCard}>
              <div className={styles.articleContent}>
                <h4 className={styles.articleTitle}>
                  世界糖尿病日,应该注意什么 来调节?
                </h4>
                <div className={styles.articleTag}>#健康养生</div>
                <div className={styles.articleStats}>
                  <span className={styles.statItem}>👍 520</span>
                  <span className={styles.statItem}>👁️ 2000</span>
                </div>
              </div>
              <div className={styles.articleThumbnail}>📰</div>
            </div>
          </div>
        </div>

        {/* 浮动智能客服按钮 */}
        <button className={styles.floatingChatBtn} onClick={handleChatClick}>
          {/* <AddOutline /> */}
          <span>智能客服</span>
        </button>
      </div>
    </Layout>
  )
}

export default Index
